<template>
    <div class="salesmanlist">
        <div v-show="isshow">
            <div class="titel"><h1>销售人选列表</h1></div>
            <div class="msg">
                <el-button type="success" @click="showadd">+ 新增</el-button>
                <el-table
                    :data="salespersonsData"
                    stripe
                    style="width: 100%"
                    :lazy="true"
                >
                    <el-table-column prop="_id" label="销售员编号" width="250">
                    </el-table-column>
                    <el-table-column prop="salesName" label="姓名">
                    </el-table-column>
                    <el-table-column prop="salesAccount" label="账号">
                    </el-table-column>
                    <el-table-column prop="salesPassword" label="密码">
                    </el-table-column>
                    <el-table-column prop="salesPhone" label="联系方式">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                @click="modification(scope.row)"
                            ></el-button>
                            <el-button
                                type="primary"
                                icon="el-icon-delete"
                                @click="del(scope.row._id)"
                            ></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div v-show="isshow1">
            <div class="titel"><h1>新增销售人员</h1></div>
            <div class="add">
                <el-form label-width="80px">
                    <el-form-item label="姓名:">
                        <el-input v-model="salespersons.salesName"></el-input>
                    </el-form-item>
                    <el-form-item label="账号:">
                        <el-input
                            v-model="salespersons.salesAccount"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input
                            v-model="salespersons.salesPassword"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式:">
                        <el-input v-model="salespersons.salesPhone"></el-input>
                    </el-form-item>
                    <el-button type="success" @click="laststep"
                        >上一步</el-button
                    >
                    <el-button type="success" @click="add(salespersons)"
                        >新增</el-button
                    >
                </el-form>
            </div>
        </div>
        <div v-show="isshow2">
            <div class="titel"><h1>修改销售人员列表</h1></div>
            <div class="add">
                <el-form label-width="80px">
                    <el-form-item label="姓名:">
                        <el-input v-model="salespersons.salesName"></el-input>
                    </el-form-item>
                    <el-form-item label="账号:">
                        <el-input
                            v-model="salespersons.salesAccount"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input
                            v-model="salespersons.salesPassword"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式:">
                        <el-input v-model="salespersons.salesPhone"></el-input>
                    </el-form-item>
                    <el-button type="success" @click="previousstp"
                        >上一步</el-button
                    >
                    <el-button type="success" @click="update(salespersons)"
                        >修改</el-button
                    >
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState } = createNamespacedHelpers("salespersons");
export default {
    mounted() {
        this.getSalespersons();
    },
    data() {
        return {
            salespersons: {
                _id: "",
                salesName: "",
                salesAccount: "",
                salesPassword: "",
                salesPhone: "",
            },
            isshow: true,
            isshow1: false,
            isshow2: false,
        };
    },
    computed: {
        ...mapState(["salespersonsData", "ByIdData"]),
    },
    methods: {
        open2() {
            this.$message({
                message: "新增成功",
                type: "success",
                duration: 1000,
                center: true,
            });
        },
        open1() {
            this.$message({
                showClose: true,
                message: "删除成功",
                type: "success",
                center: true,
            });
        },
        open5() {
            this.$message({
                showClose: true,
                message: "修改成功",
                type: "success",
                center: true,
            });
        },
        open4() {
            this.$message.error("新增失败");
        },
        open3() {
            this.$message.error("删除失败");
        },
        open6() {
            this.$message.error("修改失败");
        },
        showadd() {
            this.isshow = !this.isshow;
            this.isshow1 = !this.isshow1;
        },
        ...mapActions([
            "addSalespersons",
            "getSalespersons",
            "deleteSalespersons",
            "updateSalespersons",
        ]),
        //新增客户信息
        async add(salespersons) {
            let data = await this.addSalespersons(salespersons);
            console.log(data);
            if (data.code) {
                this.open2();
                this.getSalespersons();
                this.isshow1 = !this.isshow1;
                this.isshow = !this.isshow;
                this.getSalespersons();
            } else {
                this.open4();
            }
        },
        //上一步
        laststep() {
            this.isshow = !this.isshow;
            this.isshow1 = !this.isshow1;
        },
        //删除数据
        async del(_id) {
            let data = await this.deleteSalespersons(_id);
            if (data.code) {
                this.open1();
                this.getSalespersons();
            } else {
                this.open3;
            }
        },
        //修改数据销售员数据
        modification(val) {
            this.isshow = !this.isshow;
            this.isshow2 = !this.isshow2;
            this.salespersons = val;
        },
        previousstp() {
            this.isshow = !this.isshow;
            this.isshow2 = !this.isshow2;
        },
        async update(salespersons) {
            let data = await this.updateSalespersons(salespersons);
            if (data.code) {
                this.open5();
                this.getSalespersons();
                this.isshow2 = !this.isshow2;
                this.isshow = !this.isshow;
            } else {
                this.open6();
            }
        },
    },
};
</script>

<style lang="scss">
.salesmanlist {
    .titel {
        line-height: 40px;
        background: rgba(185, 169, 169, 0.911);
        h1 {
            margin-left: 20px;
            color: rgb(255, 255, 255);
        }
    }
    .msg {
        background: white;
        // height: 500px;
        margin-top: 30px;
        padding: 20px 20px 20px 20px;
    }
    .add {
        background: white;
        margin-top: 30px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-form {
            width: 350px;
            text-align: center;
        }
    }
}
</style>